﻿function imageLoaded(event) {
    var w = event.target.width;
    var h = event.target.height;
    var index = $(event.target).attr("alt");
    var dom = $("#fl_img_" + index);
    if (w > h) {
        $(dom).attr("width", "100");
        var m = (100 - (100 * (h / w))) / 2;
        $(dom).css("margin-top", m);
    }
    else if (h > w) {
        $(dom).attr("height", "100");
        $(dom).removeAttr("width");
        var m = (100 - (100 * (w / h))) / 2;
        $(dom).css("margin-left", m);
    }
    else {

    }
}
$(document).ready(function () {
    var fl_file = "";
    var template = "<div id=\"fl_panel\"></div>" +
	                            "<div id=\"fl_bottom\">" +
		                            "<div style=\"position:relative; height:60px; overflow:hidden; width:570px; text-align:left;\">" +
			                            "<div style=\"height:30px;\">" +
				                            "<form id=\"fl_form\" action=\"/api/memberservices/uploadflash\" method=\"post\" enctype=\"\">" +
     					                        "<input type=\"file\" size=\"60\" name=\"file\" style=\"border:1px solid #454545; width:430px; float:	left; margin-top:2px;\">" +
     					                        "<input type=\"submit\" value=\"Upload lên server\" style=\"height:30px; cursor:pointer; float:right\">" +
				                            "</form>" +
			                            "</div>" +
 			                        "<div id=\"fl_progress\" style=\"width:570px; min-height:10px;\">" +
        		                        "<div id=\"fl_bar\" style=\"background-color:Teal; height:10px; width:0%; float:left;\"></div>" +
			                        "</div>" +
			                        "<div id=\"fl_percent\" style=\"text-align:center;\"></div >" +
		                        "</div>" +
                                "<div id=\"fl_select_text\"></div>" +
                                    "<div style=\"text-align:right\">" +
                                    "<button id=\"fl_delete_bnt\">Xóa flash</button>" +
                                    "<button id=\"fl_close_bnt\">Đóng</button>" +
                                    "<button id=\"fl_select_bnt\">Chọn flash</button>" +
                                "</div>" +
	                       "</div>";
    var imgTem = "<div class=\"fl_image\" style=\"float:left; margin:5px; width:550px; height:40px; background-color:#aaa;  position:relative\">" +
                                "<img style=\"float:left;\" id=\"fl_img_{id}\" src=\"/Images/swf_icon.png\" width=\"40px\"  alt=\"{alt}\" />" +
                                "<div style=\"float:left; margin-top:10px; width:500px;overflow:hidden;\"><span class=\"flash_text\">{text}</span></div>" +
                        "</div>";



    function RefeshImage() {
        $.getJSON("/api/memberservices/GetAllFlash", function (data) {
            $('#fl_panel').empty();
            for (var i = 0; i < data.length; i++) {
                var image = imgTem.replace("{src}", "/memberpictures/" + data[i].fileName);
                image = image.replace("{alt}", data[i].fileName);
                image = image.replace("{id}", i);
                image = image.replace("{text}", data[i].fileName);
                $('#fl_panel').append(image);
            }

            $(".fl_image").click(function (event) {
                var div = $(event.target);
                var t = 0;
                while ($(div).attr("class") != "fl_image") {
                    div = $(div).parent();
                    t++;
                }
                var fileName = $(div).find("span").text();
                $(".fl_image").removeClass("fl_image_selected");
                $(div).addClass("fl_image_selected");
//                if (fileName == undefined) {
//                    fileName = $(event.target).attr("alt");
//                    $(div).addClass("fl_image_selected");
//                }
//                else {

//                    $(event.target).addClass("fl_image_selected");
//                }
                fl_file = fileName;
                $("#fl_select_text").empty();
                $("#fl_select_text").append(fileName);
            });
        });
    }


    $(".fl_picbox a").click(function (event) {

        var parent = $(event.target).parent();
        $("body").append("<div class=\"fl_screen_mask\"></div>");
        var x = $(window).width();
        var y = $(window).height();
        $(".fl_screen_mask").css("width", x + "px");
        $(".fl_screen_mask").css("height", y + "px");
        $("body").append("<div class=\"fl_screen_popup\"></div>")
        if (x > 600) {
            var newleft = (x - 600) / 2;
            $(".fl_screen_popup").css("left", newleft + "px");
        }
        else {
            $(".fl_screen_popup").css("left", "0px");
        }

        if (y > 600) {
            var newtop = (y - 600) / 2;
            $(".fl_screen_popup").css("top", newtop + "px");
        }
        else {
            $(".fl_screen_popup").css("top", "0px");
        }

        $(".fl_screen_popup").append(template);

        RefeshImage();

        $("#fl_close_bnt").click(function () {
            $(".fl_screen_mask").remove();
            $(".fl_screen_popup").remove();
        });

        $("#fl_select_bnt").click(function () {
            var parent = $($(event.target).parent()).parent();
            $(parent).find("input").val(fl_file);
            $(".fl_screen_mask").remove();
            $(".fl_screen_popup").remove();

        });

        $("#fl_delete_bnt").click(function () {

            if (confirm('Bạn có muốn xóa file đã chọn')) {
                if (fl_file != "") {
                    var url = "/api/memberservices/deleteflash/" + fl_file;
                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function (data) {
                            RefeshImage();
                            fl_file = "";
                            $("#fl_select_text").empty();
                        }
                    });
                }
            }


        });



        var options = {
            beforeSend: function () {
                $("#fl_progress").show();
                //clear everything
                $("#fl_bar").width('0%');
                $("#fl_percent").html("0%");
            },
            uploadProgress: function (event, position, total, percentComplete) {
                $("#fl_bar").width(percentComplete + '%');
                $("#fl_percent").html(percentComplete + '%');
                if (percentComplete == 100) {
                    $("#fl_percent").html("<font color='green'>" + "Server đang lưu file..." + "</font>");
                }

            },
            success: function () {
                $("#fl_bar").width('100%');
                $("#fl_percent").html('100%');
                RefeshImage();
            },
            complete: function (response) {
                $("#fl_percent").html("<font color='green'>" + response.responseText + "</font>");
            },
            error: function () {
                $("#fl_percent").html("<font color='red'> ERROR: unable to upload files</font>");

            }

        };
        $("#fl_form").ajaxForm(options);


    });
});


